import React,{ useState, useEffect, useImperativeHandle } from 'react'
import { List, InputItem, DatePicker, TextareaItem, Checkbox, Button, Icon } from 'antd-mobile'
import SelfInput from 'components/common/selfInput'
import Cascade from 'components/common/cascade'
import ModalCheck from 'components/common/modalCheck'
import Star from 'components/common/star'
import SelfCheckBox from 'components/common/selfCheckBox'
import SelfRadio from 'components/common/selfRadio'
import { getDicType } from 'ser/actions'


import './index.less';
export default function InduType({ item, cRef }) {
  const [ indVisible, setIndVisible ] = useState(false)
  const [ compVisible, setCompVisible ] = useState(false)
  const [ compTypeList, setCompTypeList ] = useState([])
  const [ indTypeList, setIndTypeList ] = useState([])
  const [ compProList, setCompProList ] = useState([])
  const [ ownerShipList, setOwnerShipList ] = useState([])
  const [ induStr, setInduStr ] = useState('')
  const [ induValueStr, setInduValueStr ] = useState('')
  const [ compProStr, setCompProStr ] = useState('')
  const [ compProValueStr, setCompProValueStr ] = useState('')
  // 字段
  const [ companyType2, setCompanyType2 ] = useState('')
  const [ companyType2CN, setCompanyType2CN ] = useState('')
  const [ ownership, setOwnership ] = useState('')
  useEffect(() => {
    async function fetchData () {
      const dic1 = await getDicType({ value: 'companyType2' }) // 企业类型
      const dic2 = await getDicType({ value: 'industry' }) // 行业分类
      const dic3 = await getDicType({ value: 'companyProperty' }) // 企业性质
      const dic4 = await getDicType({ value: 'ownership' }) // 股份结构
      if (dic1.code === 0) {
        dic1.rows.length && setCompTypeList(dic1.rows)
      }
      if (dic2.code === 0) {
        dic2.rows.length && setIndTypeList(dic2.rows)
      }
      if (dic3.code === 0) {
        dic3.rows.length && setCompProList(dic3.rows)
      }
      if (dic4.code === 0) {
        console.log('dic4.rows', dic4.rows)
        dic4.rows.length && setOwnerShipList(dic4.rows)
      }
    }
    fetchData()
  }, [])
  useImperativeHandle(cRef, () => ({
    companyType2,
    companyType2CN,
    industry: induValueStr,
    industryCN: induStr,
    companyProperty: compProValueStr,
    companyPropertyCN: compProStr,
    ownership
  }))
  return (
    <>
      <div className="compStyle">
        <div className="title">
          <Star />
          <span>企业类型（多选）</span>
        </div>
        <div className="radio">
          <SelfCheckBox
            data={compTypeList}
            handleChange={(i, v) => { setCompanyType2(v + '');setCompanyType2CN(i+ '')}}
          />
        </div>
      </div>
      <div className="modalCheck" onClick={() => setIndVisible(true)}>
        <div>
          <Star />
          行业分类（多选）
        </div>
        {
          induStr ? <div>{induStr}</div> : (<div>
            <span>请选择</span>
            <Icon type='right' />
          </div>)
        }

      </div>
      <div className="modalCheck" onClick={() => setCompVisible(true)}>
        <div>
          <Star />
          企业性质（多选）
        </div>
        {
          compProStr ? <div>{compProStr}</div> : (<div>
            <span>请选择</span>
            <Icon type='right' />
          </div>)
        }
      </div>
      <ModalCheck visible={indVisible} data={indTypeList} handleModal={(i, v) => { setIndVisible(false); setInduStr(i); setInduValueStr(v) } } />
      <ModalCheck visible={compVisible} data={compProList} handleModal={(i, v) => { setCompVisible(false); setCompProStr(i); setCompProValueStr(v)} } />
      <div className="compStyle">
        <div className="title">
          <Star />
          <span>股份结构</span>
        </div>
        <div className="radio">
          <SelfRadio
            radioData={ownerShipList}
            handleRadioChange={(v) => setOwnership(v)}
          />
        </div>
      </div>
    </>
  );
}
